<template>
	<view class="">
		<up-loadmore status="loading" v-if="isLoading" />
		<scroll-view scroll-y="true" class="scroll-Y" :show-scrollbar="false" :style="{height: innerHeight}" v-else
			@scroll="scrollY">
			<up-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" v-if="!lists || lists.length == 0">
			</up-empty>
			<view class="" v-else>
				<view class="item-container">
					<view class="item" v-for="item in lists" :key="item.id">
						<view class="item-top">
							<text>{{item.createTime}}</text>
							<text style="color: #0000ff" v-if="item.execStatus == 1">进行中</text>
							<text style="color: #00aa00" v-else-if="item.execStatus == 2">已提交</text>
							<text style="color: #FF8A00" v-else-if="item.execStatus == 3">待审批</text>
							<text style="color: #ff0000" v-else-if="item.execStatus == 4">驳回</text>
							<text style="color: #ff55ff" v-else-if="item.execStatus == 5">已维保</text>
							<text style="color: #28C445" v-else-if="item.execStatus == 6">已完成</text>
							<text style="color: #325EF5;" v-else>待开始</text>
						</view>
						<view class="item-name">
							{{item.clientName?item.clientName:'暂无公司'}}
						</view>
						<view class="item-address">
							{{item.clientAddress}}
						</view>
						<view class="item-time">
							<text>完成时间：</text>
							<text>{{item.execEndTime}}</text>
						</view>
						<view class="item-type">
							维保名目
						</view>
						<view>
							{{item.planName}}
						</view>
						<!-- <view class="item-imgs">
							<image src="https://abc-img.jia.com/static/image/semtf/scheme_01.jpg" mode=""></image>
							<image src="https://abc-img.jia.com/static/image/semtf/scheme_02.jpg" mode=""></image>
						</view> -->
						<view class="item-btn" v-if="type == 3">
							<checkbox value="cb" checked="true" iconColor="#ffffff" activeBackgroundColor="#325EF5" />
							选择此任务
						</view>
						<view class="item-btn" v-if="type == 2">
							<!-- <button plain="true" type="primary" @click="show = true"></button> -->
							<up-button @click.stop="changeTime(item)" v-if="!item.isChange && item.execStatus == 0"
								class="time-btn">修改上门时间</up-button>
							<button disabled="true" plain="true" type="primary" class="change-ok time-btn"
								v-if="item.isChange">已修改上门时间</button>
							<button @click.stop="reachHandler(item)" v-if="item.execStatus == 0"
								class="reach">我已到达</button>
								
								
							<button @click.stop="recordRejection(item)" v-if="item.execStatus == 4"
									class="reach">驳回记录</button>
							<button @click.stop="overTaskHandler(item)"
								v-if="item.execStatus == 1||item.execStatus == 4" class="reach">开始维保</button>
							<button disabled="true" plain="true" type="primary" class="change-ok reach"
								v-if="item.execStatus == 3">已上传任务表单</button>
						</view>
						<view class="item-btn" v-if="type == 4">
							<!-- <button class="check" @click="reachHandler(item)" v-if="item.execStatus == 2">审核历史</button> -->
							<!-- 			<button @click="overTaskHandler(item)" v-if="item.execStatus == 3">任务审核</button> -->
							<button class="check" @click.stop="overTaskHandler(item,1)"
								v-if="item.execStatus != 5&&item.execStatus != 4 && !item.flag">任务审核</button>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<up-datetime-picker :show="timeShow" v-model="time" mode="datetime" :closeOnClickOverlay="true"
			:minDate="Number(new Date())"
			@confirm="confirm" @change="change" @cancel="cancel" @close="close">
		</up-datetime-picker>
	</view>
</template>

<script setup>
	import {
		changeTaskTime,
		imReach
	} from '@/api/maintenance.js'
	import {
		ref,
		reactive,
		onMounted,
		defineProps,
		defineEmits,
		watch
	} from 'vue'

	let emit = defineEmits(['scroll', 'reach'])
	let {
		type,
		isChange,
		innerHeight,
		lists,
		isLoading
	} = defineProps({
		type: Number,
		isChange: Boolean,
		innerHeight: '90vh',
		lists: Array,
		isLoading: Boolean,
	})
	let time = ref(Date.now())
	let timeShow = ref(false)
	let changeItemId = ref()
	onMounted(() => {})
	watch(lists, (value) => {
		console.log(value);
	})
	const overTaskHandler = (item, type) => {
		if (item.planType == '3') {
			uni.navigateTo({
				url: `/pages/tasks/fireYear?name=任务审核&itemId=${item.id}${type?'&type=审核&status='+item.execStatus:`&status=${item.execStatus}`}`
			})
		} else {
			uni.navigateTo({
				url: `/pages/tasks/fire?name=任务审核&itemId=${item.id}${type?'&type=审核&status='+item.execStatus:`&status=${item.execStatus}`}`
			})
		}
	}
	
	
	const recordRejection = (item)=>{
		uni.navigateTo({
			url: `/pages/maintenance/record?nameValue=2&itemId=${item.id}`
		})
	}
	const overTaskHandler1 = (item, type1) => {
		console.log('type',type);
		if (type != 0) return
		if (item.planType == '3') {
			uni.navigateTo({
				url: `/pages/tasks/fireYear?itemId=${item.id}${type?'&type=审核&status='+item.execStatus:`&status=${item.execStatus}`}`
			})
		} else {
			uni.navigateTo({
				url: `/pages/tasks/fire?itemId=${item.id}${type?'&type=审核&status='+item.execStatus:`&status=${item.execStatus}`}`
			})
		}
	}
	// 我已到达
	const reachHandler = (item) => {
		imReach(item.id).then(res => {
			if (res.code == 200) {
				uni.showToast({
					title: '状态修改成功！',
					icon: 'none',
				})
				emit('getList')
			}
		})
	}
	const changeTime = (item) => {
		timeShow.value = true
		changeItemId.value = item.id
		time.value = item.planStartDate
	}
	const scrollY = e => {
		emit('scroll', e)
	}
	// 时间选择器组件事件
	const confirm = e => {
		let data = {
			planStartDate: e.value,
			id: changeItemId.value
		}
		changeTaskTime(data).then(res => {
			if (res.code == 200) {
				timeShow.value = false
				uni.showToast({
					title: '时间修改成功！',
					icon: 'none',
				})
				emit('getList')
			}
		})
	}
	const cancel = e => {
		timeShow.value = false
	}
	const change = e => {
		console.log('change', e);
	}
	const close = e => {
		timeShow.value = false
	}
</script>

<style lang="less" scoped>
	@import "../App.less";

	.scroll-Y {
		padding: 10rpx 28rpx 40rpx 28rpx;

		// height: 95vh;
		.item-container {

			.item {
				margin-bottom: 20rpx;
				height: 26vh;
				background-color: #fff;
				border-radius: 24rpx;
				padding: 20rpx;
				font-size: 24rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.item-top {
					.inline_space_between();

					& text:nth-child(2) {
						font-size: 30rpx;
						color: #28C445;
						font-weight: bold;
					}
				}

				// &::after {
				// 	content: '';
				// 	width: 100%;
				// 	height: 10vh;
				// }

				.item-name,
				.item-type {
					font-size: 30rpx;
					color: #325EF5;
				}

				.item-time {
					.inline_space_between();

					text:nth-child(2) {
						color: #325EF5;
					}
				}

				.item-imgs {
					display: flex;

					image {
						width: 94rpx;
						height: 94rpx;
						margin-right: 16rpx;
					}
				}

				.item-btn {
					display: flex;
					justify-content: flex-end;


					button {
						margin: 0 20rpx;
						width: 240rpx;
						// height: 64rpx;
						border-radius: 12rpx;
					}

					.time-btn {
						background-color: #fff;
						border: 1px solid #325ef5;
						color: #325ef5;
					}

					.reach {
						background-color: #325ef5;
						border: 1px solid #325ef5;
						color: #fff;
						font-size: 28rpx;
					}

					.change-ok {
						opacity: 0.5;
						width: 50%;
					}

					.check {
						background-color: #325ef5 !important;
						border: 1px solid #325ef5;
						color: #fff !important;
						font-size: 28rpx !important;

					}
				}

			}

			&::after {
				content: '--- 没有更多数据了 ---';
				display: block;
				width: 100%;
				height: 150rpx;
				text-align: center;
				opacity: 0.5;
				// margin-bottom: 50rpx;
			}
		}


	}
</style>